/**
 * 
 * 用法.HTML代码
 * <TransitionGroup name="drag-list" tag="div" class="container">
        <div
          v-for="(item, i) in state.list"
          :key="item.id"
           class="drag-item"
          :draggable="true"
          @dragstart="dragStart($event, i)"
          @dragenter="dragnter($event, i)"
          @dragend="dragEnd"
          @dragover="dragOver"
        >
          {{ item.title }}
        </div>
      </TransitionGroup>

##csss样式
.drag-item {
  width: 100px;
  height: 40px;
  line-height: 40px;
  background-color: rgba(135, 207, 235, 0.699);
  text-align: center;
  margin: 10px;
  color: #fff;
  font-size: 18px;
}
 
.drag-container {
  position: relative;
  padding: 0;
  display: flex;
  flex-wrap: row wrap;
}
 
.drag-moveing {
  opacity: 0;
}
.drag-list-move,.drag-list-enter-active,.drag-list-leave-active {
  transition: all 0.2s ease;
}
 */


export default function (dataList) {
  let dragIndex = 0
  const dragStart=(e, index) => {
    e.stopPropagation()
    dragIndex = index
    setTimeout(() => {
      e.target.classList.add('drag-moveing')
    }, 100)
  }
  const dragEnter =(e, index) => {
    e.preventDefault()
    // 拖拽到原位置时不触发
    if (dragIndex !== index) {
      const source = dataList[dragIndex]
      dataList.splice(dragIndex, 1)
      dataList.splice(index, 0, source)
      // 更新节点位置
      dragIndex = index
    }
  }
  const dragOver =(e) => {
    e.preventDefault()
    e.dataTransfer.dropEffect = 'move'
  }
  const dragEnd = (e)  => {
    e.target.classList.remove('drag-moveing')
  }

  return { dragStart, dragEnter, dragOver, dragEnd}
}